import "./getmoney.scss"
import { Button, Dialog } from "antd-mobile"
import { getUserPofile, getMoneyApi, setPayInfoApi } from "@/api/modules/userprofile"
import { useEffect, useState, useRef } from "react"

function GetMoney() {
    const [userProfile, setUserProfile] = useState({})
    const getNumRef = useRef()
    const getPayInfo1 = useRef()
    const getPayInfo2 = useRef()

    useEffect(() => {
        getUserPofile().then(res => {
            if (res.code == 0) {
                setUserProfile(res.data)
            }
        })
    }, [])
    const getMoney = () => {
        if (getNumRef.current.value > 0) {
            getMoneyApi({
                num: getNumRef.current.value
            }).then(res => {
                if (res.code == 0) {
                    Dialog.alert({
                        confirmText: "确认",
                        content: res.msg
                    })
                    setUserProfile(res.data)
                }
                else {
                    Dialog.alert({
                        confirmText: "确认",
                        content: res.msg
                    })
                }
            })
        }
        else {
            Dialog.alert({
                confirmText: "确认",
                content: "请输入金额"
            })
        }
    }
    const setInfo = () => {
        let value = userProfile.payInfo ? getPayInfo1.current.value : getPayInfo2.current.value
        if (value) {
            setPayInfoApi({
                payInfo: userProfile.payInfo ? getPayInfo1.current.value : getPayInfo2.current.value
            }).then(res => {
                if (res.code == 0) {
                    Dialog.alert({
                        confirmText: "确认",
                        content: res.msg
                    })
                    setUserProfile(res.data)
                    userProfile.payInfo ? getPayInfo1.current.value = "" : getPayInfo2.current.value = ""
                }
            })
        }
        else {
            Dialog.alert({
                confirmText: "确认",
                content: "请输入绑定账户"
            })
        }
    }
    const renderPay = () => {
        const has = userProfile.payInfo
        if (has) {
            return (
                <>
                    <p className="dq">
                        <span>当前绑定支付宝：</span>
                        <span>{userProfile.payInfo}</span>
                    </p>
                    <p>
                        <input ref={getPayInfo1} className="inputele" type="text" placeholder="请输入支付宝账户" />
                        <Button className="redo" block color="primary" fill="soild" onClick={() => setInfo()}>重新绑定</Button>
                    </p>
                </>
            )
        }
        else {
            return (
                <>
                    <p>
                        <input ref={getPayInfo2} className="inputele" type="text" placeholder="请输入支付宝账户绑定" />
                        <Button onClick={() => setInfo()} className="redo" block color="primary" fill="soild">绑定</Button>
                    </p>
                </>
            )
        }
    }
    return (
        <>
            <div className="getmoney">
                <div className="header">
                    <p className="broke-header">您的可提现金额为：¥ <span>{userProfile.money}</span></p>
                </div>
                <div className="inputMoney">
                    <p>请输入提现金额（元）</p>
                    <p className="symbol">￥ <input type="text" ref={getNumRef} className="inputele" placeholder="0.00" /></p>
                </div>
                <Button className="getbtn" onClick={() => getMoney()} block color="primary" fill="soild">申请提现</Button>

                <div className="pay">
                    {renderPay()}
                </div>
            </div>
        </>
    )
}

export default GetMoney